<script lang="ts" setup>
const props = defineProps<{
  focus: boolean;
}>();
const effect = ref("「 世上本没有路，走的人多了便成了路 」");
const verse = ref("—— 我自己说的");
const fade = ref(false);

watch(fade, () => {
  if (fade.value) setTimeout(() => (fade.value = false), 450);
});
</script>

<template>
  <div class="quote" id="quote" :class="{ focus: !props.focus, fade: fade }">
    <p>{{ effect }}</p>
    <p class="from" v-if="verse">{{ verse }}</p>
  </div>
</template>

<style scoped>
.quote {
  top: 90vh;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  z-index: -1;
  width: max-content;
  max-width: min(90%, 360px);
  color: #fff;
  transition: 0.45s;
  backdrop-filter: blur(2px);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  padding: 8px 12px;
  user-select: none;
  font-family: "PingFang SC", "Microsoft Yahei", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Nunito", "Comic Sans MS", Consolas, monospace,
    sans-serif;
  cursor: pointer;
}

.fade {
  animation: fadeIn 0.45s ease-in;
}

.quote:hover {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.9);
  background: rgba(60, 60, 60, 0.3);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.from {
  text-align: right;
  opacity: 0;
  transition: 0.25s ease-in;
  animation: fadeIn 0.25s ease-in;
}

.quote:hover .from {
  opacity: 1;
}

.focus {
  opacity: 1;
}
</style>
